<template>
	<div class="hello page-title">
		<h1>SCSS / Scoped CSS Test</h1>
		<el-checkbox v-model="checked">备选项</el-checkbox>
		<h1>{{ msg }}</h1>
		<button v-on:click="show = !show">Toggle</button>
		<transition name="fade">
			<p v-if="show">hello</p>
		</transition>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
			<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
			<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
			<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
export default {
	name: 'hello',
	data () {
		return {
			show: true,
			msg: 'Welcome to Your Vue.js App',
			checked: true,
			activeName: 'second'
		};
	},
	methods: {
		handleClick (tab, event) {
			console.log(tab, event);
		}
	},
	created: function () {
		console.log('created hello....');
	},
	mounted: function () {
		console.log('mounted hello....');
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
